<template>
  <el-card style="margin-top: 10px;position: relative;background-color: #f5f7fa"
           v-for="(item, index) in talents" :key="index">
    <el-row>
      <div style="width: 300px">
        <el-row>
          <ul type="none">
            <li>
            <span style="font-size: 20px;">
              <b>
                {{item.nickname}}
              </b>
            </span>
            </li>
            <li>
              <span style="font-size: 15px">
                {{item.age}}岁
                <span v-if="item.jobStatus !==null">|</span>
                {{item.jobStatus}}
              </span>
            </li>
            <li>
              <span style="font-size: 15px">
                {{item.salary}}
              <span v-if="item.targetPosition !==null">|</span>
                {{item.targetPosition}}
              </span>
            </li>
          </ul>
        </el-row>
      </div>

      <el-row>
        <div style="width: 300px" v-for="(i, index) in item.educationExperiences" :key="index">
          <ul>
            <b>
              教育背景：
            </b>
            <li>
            <span style="font-size: 15px">
              {{i.startDate}} - {{i.endDate}}
            </span>
            </li>
            <li>
              {{i.schoolName}}
              {{i.degree}}
              {{i.major}}
            </li>
          </ul>
        </div>
      </el-row>

      <el-row>
        <div style="width: 300px" v-for="(i, index) in item.workExperiences" :key="index">
          <ul>
            <b>
              工作经历：
            </b>
            <li>
            <span style="font-size: 15px">
              {{i.startDate}} - {{i.endDate}}
            </span>
            </li>
            <li>
              {{i.companyName}}
              {{i.position}}
            </li>
          </ul>
        </div>
      </el-row>

      <el-row>
        <div style="width: 300px; padding-top: 30px;" >
          <el-button-group >
            <el-button type="primary" style="position: relative;left: 300px">
              去沟通
            </el-button>
          </el-button-group>
        </div>
      </el-row>
    </el-row>
  </el-card>
  <div class="footer" style="margin-top: 20px; margin-left: 45%">
    <el-button @click="loadTalent">
      换一批
    </el-button>
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";

const total = ref(4);
const talents = ref([]);

const loadTalent = () => {
  axios.get(BASEURL+'/employee/getRecommendTalent/'+total.value).then((response)=>{
    if (response.data.code===2000){
      console.log("推荐牛马成功:"+response.data.data);
      talents.value = response.data.data;
      console.log("推荐牛马成功:"+talents);
    }
  })
}

onMounted(()=>{
  loadTalent();
})
</script>

<style scoped>

</style>